<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工查询</title>
    <link rel="stylesheet" href="/js/elementui/index.css">

</head>
<body>
<div id="app">
    <!-- 查询    -->
    <div :model="tops" class="demo-input-size" >
    <el-input  type="hidden" v-model="tops.input"  style="width: 12%"   placeholder="请输入内容" ></el-input>

        <!--        所有的部门-->
        <el-input  type="hidden" v-model="tops.dId"  style="width: 12%"   placeholder="请输入内容" ></el-input>






    </div>

    <label>--------------------------------------------------------</label>
    <div>
        <el-button plain @click="changeGo">批量 启动/停用</el-button>
        <el-button plain @click="returnPage">返回上一级</el-button>
        <div class="block">
            <el-row :gutter="1" type="flex" class="row-bg" justify="space-between">
                <el-col :span="2">
                    <span>每条显示条数:</span>
                </el-col>
                <el-col :span="2">
                    <!--每页可显示条数-->

                    <el-pagination
                            @size-change="handleSizeChange"
                            :current-page="current"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="5"
                            layout="sizes"
                            :total="total">
                    </el-pagination>
                </el-col>
                <el-col :span="19">

                </el-col>

            </el-row>
        </div>


    </div>
    <!--    表格-->
    <div>

        <el-table
                tooltip-effect="dark"
                :data="tableData"
                @selection-change="changeAll"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55"

            >
            </el-table-column>

            <el-table-column
                    label="员工编号"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.no }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="姓名"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="员工职位"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.post }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="所属部门"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.department }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="入职时间"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.entryTime }}</span>
                </template>
            </el-table-column>


            <el-table-column
                    label="账号状态"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.accountStatus=='-1'" style="color: red">已停用</span>
                    <span v-else style="color: #5daf34">已激活</span>
                </template>
            </el-table-column>


            <el-table-column label="操作">
                <template slot-scope="scope">

                    <el-button
                            size="mini"
                            @click="changeStatus(scope.$index, scope.row)"
                            type="success"
                            icon="el-icon-check"
                    ></el-button>
<!--                    进入详情页面-->
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-tickets"
                        @click="handleEdit(scope.$index, scope.row)"

                ></el-button>
                </template>
            </el-table-column>

        </el-table>
        <!--    分页-->
        <div class="block">
            <el-row type="flex" class="row-bg" justify="space-between">
                <el-col :span="6">
                    <span v-if="current*pageSize>total">第{{(current-1)*pageSize+1}}到{{total}}条记录,总共{{total}}条</span>
                    <span v-else>第{{(current-1)*pageSize+1}}到{{current*pageSize}}条记录,总共{{total}}条</span>
                </el-col>
                <el-col :span="6">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="pp"
                            :total="total"
                            :current-page="current"
                            :page-size="pageSize"
                    >
                    </el-pagination>
                </el-col>
            </el-row>
        </div>


    </div>

</div>

<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>


<script>
    new Vue({
        el:"#app",
        data(){
            return{
                tableData: null,//表数据
                total:0,//总条数
                current:1, //当前页数
                pageSize:5, //每页条数
                dialogFormVisible: false,//控制对话框的显示
                changeAllStatus:'',

                //所有的职位
                postsName:[],
                //所有的部门
                DepName:[],
                //所有的企业
                compareName:[],
                options:[{
                    value:'正式员工',
                    label:'正式员工'
                },
                    {
                        value: '试用期员工',
                        label:'试用期员工'
                    }
                ],
                zhanghao:[{
                    value:'1',
                    label:'已激活'
                },
                    {
                        value: '-1',
                        label:'未激活'
                    }
                ],

                tops:{
                    input:null,
                    dId:null,
                }


            }
        },
        mounted() {
            this.loadPage(1,this.tops.input,this.tops.dId,this.pageSize)
            //加载所有的职位
            axios.get("/AllPostName").then(value => {
                this.postsName=value.data.data;
            }),

                //加载所有的子部门
                axios.get("/AllDepName").then(value => {
                    this.DepName=value.data.data;
                }),

                //加载所有的企业
                axios.get("/AllCompareName").then(value => {
                    this.compareName=value.data.data;
                })
        } ,
        methods:{
            pp(current){
                this.current=current;
                this.loadPage(this.current,this.tops.input,this.tops.dId,this.pageSize)
            },

            //点击详情
            handleEdit(index, row) {

                axios.get("/qiYeToDetails/"+row.id).then(value => {
                    console.log(row.id)
                    location.href="/qiye/details.html";
                })

            },
            changeStatus(index, row) {
                // console.log(index, row);
                axios.put("/staffsToStatus/"+row.id).then(value => {
                    console.log(row.accountStatus)
                    if (value.data.code==1){
                        this.loadPage(this.current,this.tops.input,this.tops.dId,this.pageSize)
                    }
                })

            },
            //当前页面跳转方法
            loadPage(current,input,dId,pageSize){
                this.current=current;
                this.pageSize=pageSize;
                //查询商品
                axios.get("/qiYeToStaff/"+current+"/"+input+"/"+dId+"/"+pageSize).then(value => {
                    this.tableData=value.data.records;
                    this.total = value.data.total;
                    this.pageSize = value.data.size;
                    this.current = value.data.current;
                })
            },


            //每页条数
            handleSizeChange(val) {
                this.current=1;
                this.pageSize=val;
                this.loadPage(this.current,this.tops.input,this.tops.dId,this.pageSize)
            },
            // 返回上一级
            returnPage(){

                window.history.back(); //返回上一页

            },
            //批量停用获取值
            changeAll(selection){
                console.log(selection)
                this.changeAllStatus=''
                for (let selectionKey in selection) {
                    this.changeAllStatus+=selection[selectionKey].id+","
                }
                this.changeAllStatus=this.changeAllStatus.substring(0, this.changeAllStatus.length - 1);
                console.log("s所有的"+this.changeAllStatus);
            },
        //  进行批量停用或者启动

        changeGo(){
            if (this.changeAllStatus==""){
                alert("请正确的勾选")
            }else {
                var arr1= this.changeAllStatus.split(",");
                for (let arr of arr1) {
                    axios.put("/staffsToStatus/"+arr).then(value => {
                        if (value.data.code==1){
                            this.loadPage(this.current,this.tops.input,this.tops.dId,this.pageSize)
                        }s
                    })
                }
            }
        }


        }
    })

</script>


</body>
</html>